<template>
  <el-dialog
      v-model="isShowODPointManage"
      :direction="direction"
      draggable
      top="80px"
      :modal="false"
      style="position: absolute;left: 205px;width:18%;">
    <template #title>
      <h2>选择单车轨迹时间点</h2>
    </template>
    <template #default>
      <div>
        <el-radio v-model="ODPointDateRadio" label='o_1221' size="large" style="margin-right: 0"
        >O点 2021-12-21</el-radio>
        <el-radio v-model="ODPointDateRadio" label='d_1221' size="large"
        >D点 2021-12-21</el-radio>
      </div>
    </template>

    <template #footer>
      <div style="flex: border-box">
        <el-button @click="hideODPoint">显示/隐藏</el-button>
        <el-button type="primary" @click="getODPointData">获取数据</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import "../pages/Map.vue";
import { ref, reactive, toRefs} from 'vue'
import store from "../store/index.js";
import axios from "axios";
import Point from "ol/geom/Point"
import WKT from "ol/format/WKT";
import { Fill, Stroke, Style, Text , Circle, Icon} from "ol/style";
import {Cluster,Vector as VectorSource} from 'ol/source';
import {Vector as VectorLayer} from 'ol/layer';
import Feature from 'ol/feature';
import View from 'ol/View';
import {getCurrentInstance} from 'vue';
import { showLoading, hideLoading } from '../store/loading.js'


const isShowODPointManage = ref(false)

const direction = ref('rtl')
const ODPointDateRadio = ref('gj20201221')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}

//TopMenu通过Home.vue传值
export interface ExposeType {
  getIsShowODPointMsg:Function
}
//将TopMenu中的isshowBikeTrace值传入
const  getIsShowODPointMsg = (val:boolean) => {
  isShowODPointManage.value = val
}
//将值暴露
defineExpose({
  getIsShowODPointMsg: getIsShowODPointMsg
})

/*单车轨迹*/
//初始化单车bikeTraceVector、bikeTraceSource
const instance = getCurrentInstance();
const ODPointVector=ref(null)
const ODPointSource=ref(null)
const odFeature=ref(null)
const odFeatureCube=ref([])
const pointFeature=ref(null)
const clusterSource=ref(null)
//清空featureCube
const clearFeatureCube=()=>{
  Object.keys(odFeatureCube).map(key => {
    delete odFeatureCube[key]
  })
}
//控制单车轨迹图层显示与隐藏
const isGetODPointData=ref(false)
const isShowODPointTrace=ref(true)
ODPointSource.value=new VectorSource({})
//点聚合图层
clusterSource.value=new Cluster({
  distance: 20, // 要素将被聚合在一起的像素距离，默认为20
  minDistance: 40, // 聚合块之间的最小像素距离，默认为零
  source:ODPointSource.value,
  })
ODPointVector.value=new VectorLayer({
  name:'OD点',
  source: clusterSource.value,
  style:function (feature){
    let size=feature.get('features').length
    let odStyle="src/images/O点.svg"
    console.log(size)
/*    if(type=='1'){odStyle="src/images/D点.svg"}*/
    return  new Style({
      image: new Circle({
        radius: 15,
        stroke: new Stroke({
          color: '#fff'
        }),
        fill: new Fill({
          color: '#3399CC'
        })
      }),
      text: new Text({
        text: size.toString(),
        fill: new Fill({
          color: '#fff'
        })
      })

    })
  }
})
//点样式
const ODPointStyle=(type)=>{
    let odStyle="src/images/O点.svg"
    console.log(type)
    if(type=='1'){odStyle="src/images/D点.svg"}
    return  new Style({
      image: new Icon({
        opacity: 0.75,
        scale: 0.1,
        src: odStyle
      })
    })
}

//取消图层显示/隐藏
const hideODPoint=()=>{
  if(isShowODPointTrace.value){
    //隐藏单车图层
    ODPointVector.value.setVisible(false)
    isShowODPointTrace.value=!isShowODPointTrace.value
  }else{
    //显示
    ODPointVector.value.setVisible(true)
    isShowODPointTrace.value=!isShowODPointTrace.value
  }
}

const getODPointData=()=>{
  //post后台单车轨迹点数据
  let ODPointDate={
    dateAndClass:ODPointDateRadio.value
  }
  console.log(ODPointDate)
  //展示Loading
  showLoading()
  axios.post(store.state.dbApi+'/odpoint',ODPointDate).then(result=> {
    //初始化getDate/释放数据重新读取
    let getData=[];
    if(isGetODPointData.value)
    {//已获取数据，清空变量
      ODPointSource.value.clear()
      odFeatureCube.value=[]
      /*clearFeatureCube()*/
    }else{//未获取数据，加入图层，初始化图层
      store.state.map.addLayer(ODPointVector.value)
      store.state.checkDiyLayerList.push(ODPointVector.value.get('name'))
    }
    getData=result.data
    //获取数据库数据并通过WKT转换放入图层
    //instance.proxy.$forceUpdate();
    for(let i=0;i<getData.length;i++)
    {
      odFeature.value=new WKT().readFeature(getData[i]['point'])

      //设置属性
      odFeature.value.setProperties({
        id:getData[i]['gid'],
        bikeID:getData[i]['bikeID'],
        OD:getData[i]['lock_statu'],
        updateTime:getData[i]['update_tim']
      })

      odFeatureCube.value.push(odFeature.value)
    }
    ODPointSource.value.addFeatures(odFeatureCube.value)
    //已获取到数据
    //关闭loading
    hideLoading()
    isGetODPointData.value=true
  })
}

</script>
